<template>
  <div>
    <el-row class='el-row_b'>
      <el-col :span="5" class='panel'>

        <el-row class='panelBox'>
          <el-col :span="12" class='child'>总机器数</el-col>
          <el-col :span="12" class='child'>
            <i class='iconfont-ali icon-ali-diannao-'></i>
          </el-col>
        </el-row>

        <p>1</p>

      </el-col>
      <el-col :span="5" class='panel'>

        <el-row class='panelBox'>
          <el-col :span="12" class='child'>合作平台量</el-col>
          <el-col :span="12" class='child'>
            <i class='iconfont-ali icon-ali-hezuo'></i>
          </el-col>
        </el-row>

        <p>5</p>

      </el-col>
      <el-col :span="5" class='panel'>

        <el-row class='panelBox'>
          <el-col :span="12" class='child'>今日榨汁数量</el-col>
          <el-col :span="12" class='child'>
            <i class='iconfont-ali icon-ali-chengzhi'></i>
          </el-col>
        </el-row>

        <p>30</p>

      </el-col>
      <el-col :span="5" class='panel'>

        <el-row class='panelBox'>
          <el-col :span="12" class='child'>成交总数量</el-col>
          <el-col :span="12" class='child'>
            <i class='iconfont-ali icon-ali-renshu'></i>
          </el-col>
        </el-row>

        <p>60</p>

      </el-col>
    </el-row>
    <el-row>

      <div class="row">

        <el-col :span="11">
          <div id="main" style="height:450px;"></div>
        </el-col>
        <el-col :span="11">
          <div id="main1" style="height:450px;"></div>

        </el-col>

      </div>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {};
  },
  mounted() {
    this.drawLine();
    this.Line();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 绘制图表
      function randomData() {
        now = new Date(+now + oneDay);
        value = value + Math.random() * 21 - 10;
        return {
          name: now.toString(),
          value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("-"),
            Math.round(value)
          ]
        };
      }

      var data = [];
      var now = +new Date(2018, 5, 23);
      var oneDay = 24 * 3600 * 1000;
      var value = Math.random() * 1000;
      for (var i = 0; i < 1000; i++) {
        data.push(randomData());
      }

      let option = {
        title: {
          text: "实时榨橙子情况"
        },
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            params = params[0];
            var date = new Date(params.name);
            return (
              date.getDate() +
              "/" +
              (date.getMonth() + 1) +
              "/" +
              date.getFullYear() +
              " : " +
              params.value[1]
            );
          },
          axisPointer: {
            animation: false
          }
        },
        xAxis: {
          type: "time",
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"],
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: "模拟数据",
            type: "line",
            showSymbol: false,
            hoverAnimation: false,
            data: data
          }
        ]
      };

      setInterval(function() {
        for (var i = 0; i < 5; i++) {
          data.shift();
          data.push(randomData());
        }

        myChart.setOption({
          series: [
            {
              data: data
            }
          ]
        });
      }, 1000);

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    Line() {
      let myChart1 = this.$echarts.init(document.getElementById("main1"));
      function randomData() {
        now = new Date(+now + oneDay);
        value = value + Math.random() * 21 - 10;
        return {
          name: now.toString(),
          value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("-"),
            Math.round(value)
          ]
        };
      }

      var data = [];
      var now = +new Date(2018, 5, 23);
      var oneDay = 24 * 3600 * 1000;
      var value = Math.random() * 1000;
      for (var i = 0; i < 1000; i++) {
        data.push(randomData());
      }

      let option = {
        title: {
          text: "实时订单情况"
        },
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            params = params[0];
            var date = new Date(params.name);
            return (
              date.getDate() +
              "/" +
              (date.getMonth() + 1) +
              "/" +
              date.getFullYear() +
              " : " +
              params.value[1]
            );
          },
          axisPointer: {
            animation: false
          }
        },
        xAxis: {
          type: "time",
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"],
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: "模拟数据",
            type: "line",
            showSymbol: false,
            hoverAnimation: false,
            data: data
          }
        ]
      };

      setInterval(function() {
        for (var i = 0; i < 5; i++) {
          data.shift();
          data.push(randomData());
        }

        myChart1.setOption({
          series: [
            {
              data: data
            }
          ]
        });
      }, 1000);

      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option);
    }
  }
};
</script>
<style scoped>
@import "../../../src/assets/icon/iconfont.css";
.bg {
  background-color: #fff;
}
.dis {
  display: inline-block;
}
.left {
  float: left;
}
.right {
  float: right;
}
.panel {
  height: 150px;
  background: #fff;
  margin: 0 25px;
}
.panelBox {
  margin: 20px;
}
.child {
  height: 53px;
  line-height: 53px;
}
.iconfont-ali {
  font-size: 49px;
}
.size {
  font-size: 40px;
}
.el-row_b{

margin-bottom: 40px;
}
</style>
